@extends('admin.layouts.common')

@section('style')
<style media="screen">
	.box-card-md{
		min-height: 500px;
	}
	#treeBox{
		max-height: 600px;
		overflow: auto;
	}
	.contextmenu{
		background: #2f4050;
		width: 120px;
		position: absolute;
		z-index: 9999;
		display: none;
		padding:0;
		box-shadow: 3px 3px 3px #888888;
		min-height: 144px;
	}
	.contextmenu li {
		list-style-type:none;
		color:#a7b1c2;
		border-bottom: 1px solid #a7b1c2;
		padding:8px;
		font-size: 14px;
	}
	.contextmenu li:hover{
		color: #FFF;
		cursor: pointer;
		border-left:4px solid #409EFF;
	}
</style>
@endsection

@section('Main')
<el-row>
	<el-col :md="12">
		<el-card class="box-card box-card-md">
			<div slot="header">
				<span class="span-primary"><i class="fa fa-list"></i></span>
				{{$nowNode->name}}
			</div>
			<div class="el-card-ct">
				<el-input
				  placeholder="输入关键字进行过滤"
				  v-model="filterText" class="filterText">
				</el-input>
				<el-tree :data="treeData" node-key="id"
					ref="tree"
					:props="props"
					:filter-node-method="filterNode"
					@node-contextmenu="contextmenu">
				</el-tree>
			</div>
		</el-card>
	</el-col>
</el-row>

<ul id="contextmenu" class="contextmenu">
	<li @click="addSubDepart"><i class="fa fa-plus"></i> 添加子部门</li>
	<li @click="editDepart"><i class="fa fa-edit"></i> 编辑部门</li>
	<li @click="ChangePid"><i class="fa fa-level-up"></i> 更改所属</li>
	<li @click="delDepart"><i class="fa fa-trash-o"></i> 删除部门</li>
	<li><i class="fa fa-ban"></i> 取消操作</li>
</ul>

<script type="text/javascript">
var Main = new Vue({
	el:"#Main",
	data:{
		treeData:'',
		props:{
			label:"name",
		},
		operateNode:'',
		filterText: '',
	},
	mounted:function() {
		this.getTreeData();
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
    },
	methods:{
		getTreeData() {
			$.post('{{url("admin/department/index")}}',{_token:'{{ csrf_token() }}'},function(res){
				Main.treeData = res.data;
			})
		},
		contextmenu($event,data) {
			this.operateNode=data;
			$(".contextmenu").hide();
			$(".contextmenu").css({
				"display":"block",
				"top":$event.clientY+"px",
				"left":$event.clientX+"px"
			});
		},
		addSubDepart() {
			this.$prompt('请输入部门名称',
				'添加“'+this.operateNode.name+"”的子部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departadd',{
					pid:Main.operateNode.id,
					name:value,
					_token:"{{ csrf_token() }}"
				},function(res){
					Main.ajaxResponse(res);
				})
			}).catch(() => {});
		},
		addTopDepart() {
			this.$prompt('请输入部门名称',
				"添加顶级部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departadd',{
					pid:0,
					name:value,
					_token:"{{ csrf_token() }}"
				},function(res){
					Main.ajaxResponse(res);
				})
			}).catch(() => {});
		},
		editDepart() {
			this.$prompt('请输入部门名称',
				'编辑“'+this.operateNode.name+"”部门", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern:/\S/,
				inputErrorMessage: '请输入部门名称'
			}).then(({ value }) => {
				$.post('./departedit',{
					id:Main.operateNode.id,
					name:value,
					_token:"{{ csrf_token() }}"
				},function(res){
					Main.ajaxResponse(res);
				})
			}).catch(() => {});
		},
		delDepart() {
			var tips = "删除“"+this.operateNode.name+"”后不可恢复，确定继续吗？";
			Main.$confirm(tips, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				if(Main.operateNode.children){
					Main.$notify.error({title:'错误',message:'该部门下有子部门，不可删除'});
					return false;
				}
				var param = {_token:"{{ csrf_token() }}",id:Main.operateNode.id};
				$.post("./departdel",param,function(res){
					Main.ajaxResponse(res);
				})
			}).catch(() => {
				Main.$notify.info({title: '消息',message: "删除已取消"});
			});
		},
		ChangePid() {
			deparTree.showDeparTree = true;
			$.post("{{url('admin/department/index')}}",{_token:"{{ csrf_token() }}"},function(res){
				res.data.unshift({'id':0,'pid':0,'name':'顶级部门'});
				deparTree.deparTreeData = res.data;
			})
		},
		filterNode(value, data) {
	        if (!value) return true;
	        return data.name.indexOf(value) !== -1;
      	},
		ajaxResponse(res){
			if(res.code != 1){
				Main.$notify.error({title: '错误',message: res.msg});
			}else{
				Main.$notify({title: '成功',message: res.msg,type: 'success'});
				Main.getTreeData();
			}
		}
	}
});
$(document).on("click",function(){
	$(".contextmenu").hide();
})
</script>
@endsection


@section('Component')
<div id="deparTreeBox">
	<el-dialog title="选择部门" :visible.sync="showDeparTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="deparTreeData"
				:props="props"
				ref="deparTree"
				show-checkbox
				node-key="id"
				check-strictly="true"
				@check-change="toRadio">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showDeparTree = false">取消</el-button>
			<el-button type="success" @click="sureDepart">保存</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var deparTree = new Vue({
	el:"#deparTreeBox",
	data() {
		return {
			showDeparTree:false,
			deparTreeData:'',
			checkedTimes:0,
			props:{
				label:"name"
			}
		}
	},
	methods:{
		sureDepart() {
			this.showDeparTree = false;
			if(this.$refs.deparTree.getCheckedKeys().length == 0){
				Main.$notify.error({
					title: '错误',
					message: "请选择所属部门"
				});
				return false;
			}else if (deparTree.$refs.deparTree.getCheckedKeys()[0] == Main.operateNode.id){
				Main.$notify.error({
					title: '错误',
					message: "不能选择自己本身"
				});
				return false;
			}
			$.post("{{url('admin/department/departedit')}}",{
				_token:"{{ csrf_token() }}",
				id:Main.operateNode.id,
				pid:deparTree.$refs.deparTree.getCheckedKeys()[0]
			},function(res){
				Main.ajaxResponse(res);
			})
		},
		toRadio(data,checked, node) {
			this.checkedTimes++;
			if(this.checkedTimes%2==0){
			   if(checked){
				   this.$refs.deparTree.setCheckedNodes([]);
				   this.$refs.deparTree.setCheckedNodes([data]);
			   }else{
				   this.$refs.deparTree.setCheckedNodes([]);
			   }
			}
		}
	}
})
</script>
@endsection
